<template>
	<view class="pagesWhite">
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入交易密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="bg">
			<!-- 头部 -->
			<view class="header_bar header_fixed">
				<view class="header">
					<view class="header-goWhiteBack" @tap.stop="$tools.back(1)"></view>
					<view class="header-title--white">兑换</view>
					<view class="header-right" @tap.stop="$tools.jump('./exchangeRecords')">
						<image src="../../static/public/records.png" mode=""></image>
					</view>
				</view> 
			</view> 
			
		</view>
		
		<view class="">
			<view class="operateBox-tabs operateBox-tabs--top">
				<view class="operateBox-formBox">
					<view class="operateBox-flexBetween">
						<view class="operateBox-formBox-list-header">可用积分</view>
						<view class="balance">{{ userMoney.validNum2 ? userMoney.validNum2 : 0 }}</view>
					</view>
				</view>
				
				<view class="operateBox-formBox">
					<view class="operateBox-formBox-list-header">兑换数量</view>
					<view class="operateBox-formBox-list operateBox-formBox-listBorder" :class="{ 'operateBox-formBox-list-input--active': isFocus == 1, showCloseBtn: num != '' }">
						<!-- <view class="symbol">￥</view> -->
						<input type="number" placeholder="请输入您的兑换数量" v-model="num" placeholder-class="inputStyle"
						@blur="blurInput(1)"
						@focus="focusInput(1)"/>
						<view class="operateBox-formBox-list-image">
							<view class="operateBox-formBox-list-image__clear operateBox-formBox-list-image__clear--active" @click="clearData('num')">
								<image src="../../static/public/icon-clear.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="operateBox-formBox">
					<view class="fee" v-if="systemParam.INTEGRAL_EXCHANGE_UN_RADIO">
						≈ {{ toFloor(cheng(num,systemParam.INTEGRAL_EXCHANGE_UN_RADIO)) }} UN
					</view>
				</view>
				<view class="operateBox-formBox">
					<view class="operateBox-flexBetween">
						<view class="operateBox-formBox-list-header">手续费</view>
						<view class="balance" v-if="systemParam.INTEGRAL_EXCHANGE_UN_RADIO">{{ toFloor(cheng(cheng(num,systemParam.INTEGRAL_EXCHANGE_UN_RADIO),systemParam.INTEGRAL_EXCHANGE_UN_FEE)) }}</view>
					</view>
				</view>
				<view class="line"></view>
				
				<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">兑换</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isFocus: null,
				toggle: true,
				num: '',
				password: '',
				userMoney: {},
				userInfo: {},
				systemParam: {},
				payList: [],
			}
		},
		computed: {
			getType(){
				return function(type){
					switch (type){
						case 1:
							return '微信';
							break;
						case 2:
							return '支付宝';
							break;
						case 3:
							return '银行卡';
							break;
					}
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getUserMoney();
				this.getSystemParam();
				// this.payList = [];
				// this.getAllUserPayment();
			},
			confirm() {
				if(this.userInfo.isPayPwd == '1'){
					return this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd');
				}
				if (this.num == '' ) {
					return this.$tools.toast('请输入您的兑换数量');
				}
				if(Number(this.num) <= 0){
					return this.$tools.toast('请输入正确的兑换数量');
				}
				// if(Number(this.num) < Number(this.systemParam.WITHDRAWAL_MIN_LIMIT)){
				// 	return this.$tools.toast('兑换数量最低为'+this.systemParam.WITHDRAWAL_MIN_LIMIT);
				// }
				if (Number(this.num) > this.userMoney.validNum2) {
					return this.$tools.toast('余额不足');
				}
				this.openPopup('psdPopup');
			},
			psdSubmit(){
				if(this.password == ''){
					return this.$tools.toast('请输入交易密码');
				}
				if(this.toggle){
					this.toggle = false;
					var data = {};
					data['amount'] = this.num;
					data['payPwd'] = this.$md5(this.password);
					console.log("data:",data);
					uni.showLoading({
						mask:true
					})
					this.$Ajax('/api/money/userExchange',data,res => {
							if (res.code == 200) {
								this.$tools.toast("兑换提交成功");
								this.num = '';
								this.password = '';
								this.toggle = true;
								this.getUserMoney();
								this.hidePopup('psdPopup');
							} 
							uni.hideLoading();
						},err => {
							this.toggle = true;
							uni.hideLoading();
						}
					)
				}
			},	
			getAllUserPayment() {
				var data = {};
				console.log("data：",data);
				this.$Ajax('/api/money/getWithdrawalBindInfo',data,res => {
						if(res.code == 200){
							this.payList = res.data;
						}
					}, err => {
					}, 'GET'
				)
			},		
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common/scss/pages/operate/register';
	.bg{
		background: linear-gradient( 135deg, #0067F2 0%, #3DBBFF 99%);
		/* #ifdef H5 */
			height: 280rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
			height: 300rpx;
		/* #endif */
	}
	
	.operateBox-tabs{
		background: #FFFFFF;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		margin: -120rpx 0rpx 0;
		padding: 66rpx 34rpx;
		.operateBox-formBox-list-header{
			margin-bottom: 6rpx;
		}
		.symbol{
			font-family: PingFangSC-Regular, PingFangSC-Regular;
			font-weight: 400;
			font-size: 60rpx;
			color: #1E1E1E;
			margin-right: 26rpx;
		}
		.operateBox-formBox{
			padding: 0 20rpx;
			.fee{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #1989F8;
				margin-bottom: 50rpx;
			}
		}
		
	}
	
	.line{
		border-top: 2rpx dashed #E9EAF0;
	}
	
	.initBtn{
		margin: 80rpx 0 20rpx;
	}
	
</style>